//仪表图
import { GaugeChart } from 'echarts/charts';
import { TooltipComponent } from 'echarts/components';
import * as echarts from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';

import { useEffect, useRef } from 'react';
import { useIntl } from 'umi';
echarts.use([TooltipComponent, GaugeChart, CanvasRenderer]);

const Gauge: React.FC<{ value: number; level: string }> = ({ value = 0, level }) => {
  const ref = useRef<any>();
  const intl = useIntl();
  useEffect(() => {
    const colors = ['#007BFA', '#52C41A', '#8BC782', '#E7FFE3', '#E1FFE1'];

    const option = {
      // 鼠标悬浮的提示

      series: [
        {
          type: 'gauge',

          min: 0, //最大值

          max: 950, //最小值

          startAngle: 210, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为140度。

          endAngle: -30, //仪表盘结束角度

          splitNumber: 5, //仪表盘刻度的分割段数

          itemStyle: {
            shadowColor: 'rgba(255, 255, 255, 0.2)', //阴影颜色

            shadowBlur: 10, //图形阴影的模糊大小

            shadowOffsetX: 2, //阴影水平方向上的偏移距离

            shadowOffsetY: 2, //阴影垂直方向上的偏移距离
          },

          progress: {
            show: true, //是否显示进度条

            roundCap: true, //是否在两端显示成圆形

            width: 16, //进度条宽度

            itemStyle: {
              color: {
                type: 'linear',

                x: 0.8,

                y: 0,

                x2: 0,

                y2: 0.5,

                colorStops: [
                  {
                    offset: 0,
                    color: colors[4], // 0% 处的颜色
                  },

                  {
                    offset: 0.25,

                    color: colors[3], // 25% 处的颜色
                  },

                  {
                    offset: 0.5,

                    color: colors[2], // 50% 处的颜色
                  },

                  {
                    offset: 0.75,

                    color: colors[1], // 75% 处的颜色
                  },

                  {
                    offset: 1,

                    color: colors[0], // 100% 处的颜色
                  },
                ],

                global: false,
              },
            },
          },

          pointer: {
            show: false, //是否显示指针
          },

          axisLine: {
            show: true, //是否显示仪表盘轴线

            roundCap: true, //是否在两端显示成圆形

            lineStyle: {
              width: 16, //轴线宽度
              color: [[1, 'rgba(255, 255, 255, 0.2)']], // 圆环底色
            },
          },

          axisTick: {
            show: true, //是否显示刻度

            distance: -29,
            splitNumber: 15,
            lineStyle: {
              color: '#fff',
              width: 0.5,
              opacity: 0.2,
            },
          },

          splitLine: {
            show: true, //是否显示分隔线
            lineStyle: {
              width: 0,
            },
            distance: -30,
          },

          axisLabel: {
            distance: -12,
            color: 'rgba(255, 255, 255, 0.2)',
            fontSize: 10,
          },

          title: {
            show: true, //是否显示标题
            fontSize: 15,
            color: '#6DBF02',
            offsetCenter: [0, '30%'],
          },
          detail: {
            valueAnimation: true,
            width: '40%',
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, '-15%'],
            fontSize: 32,
            fontFamily: 'Arial',
            formatter: value ? '{value}' : '???',
            color: '#fff',
          },

          data: [
            {
              value,
              name: !value ? intl.formatMessage({ id: 'center.no_score' }) : level,
            },
          ],
        },
      ],
    };

    const myChart = echarts.init(ref.current);
    myChart.setOption(option);
  }, [value, intl]);
  return <div ref={ref} style={{ width: 240, height: 200 }} />;
};

export default Gauge;
